<template lang="">
	<div>
		<c-r-m-nav-cell
			ref="navcell" 
			:crm-type="crmType" 
			route-type="read"
			@on-handle="listHeadHandle"/>
		<div class="detailtop">
			<div style="margin-top: 10px; display: flex;">
				<div class="left-box">
					<div
						style="display: flex;justify-content: center;align-items: center;height: 50px;font-weight: 600;font-size: 14px;">
						编辑详情</div>
					<div 
						class="left-item" 
						v-for="(item,index) in leftList"
						:key="index"
						@click="onLeftHandle(item)">
						<span>{{item.name}}</span>
						<i class=" el-icon-arrow-right"></i>
					</div>
				</div>
				<div class="right-box">
					<component
						ref="baseinfo"
						:is="tabName" 
						:crm-type="crmType" 
						:id="id" 
						:detail="detailData"
						@handle="infoHandle"  />
				</div>
			</div>
		</div>
		
			
		<!-- dialog弹窗 -->
		<dialog-form
			:dialog-visible="dialogForm"
			:title="title"
			ref="crmform"  
			:crm-type="crmType"
			:fields-data = "fieldsData"
			:action="action"
			:form-data="formData"
			@close = "closeDialog"
			@save-dialog="saveDialog">
		</dialog-form>
	</div>
</template>
<script>
	import moment from 'moment'
	import { mapGetters } from 'vuex'
	import CRMNavCell from '@/components/table/new/CRMNavCell'
	import {
		CRMBaseInfo,
		CRMLawcaseLog,
		CRMLawcaseFinance,
		CRMActionRecord,
		CRMLawcaseCourt,
		CRMLawcaseJudgment,
		CRMLawcasePreservation,
		CRMLawcaseComplain
	} from '@/components/table/new/lawcase'
	
	import DialogForm from '@/components/FromData/dialogForm'
	import {
		crmLawcaseRead,
		crmLawcaseFocus,
		crmLawcaseAllclose,
		crmLawcaseClose,
		crmLawcaseJudgmentSave,
		crmLawcaseLawcasecomplainSave
	} from '@/api/lawcase/lawcase'
	export default {
		name: "app",
		components: {
			CRMNavCell,
			DialogForm,
			CRMBaseInfo,
			CRMLawcaseLog,
			CRMLawcaseFinance,
			CRMActionRecord,
			CRMLawcaseCourt,
			CRMLawcaseJudgment,
			CRMLawcasePreservation,
			CRMLawcaseComplain
		},
		computed: {
			...mapGetters(['allAuth'])
		},
		data() {
			return {
				crmType:"lawcase",
				tabCurrentName: 'basicinfo',
				
				// 基本信息
				loading:false,
				list: [],
				id:0,
				
				// 左侧操作按钮
				leftList:[
					{ "name":"结案" , "type":"close" },
					{ "name":"归档" , "type":"allclose" },
					{ "name":"添加判决" , "type":"save_panjue" },
					{ "name":"添加客户反馈" , "type":"save_complain" },
					{ "name":"关注案件" , "type":"focus" },
				],
				
				type:'',
				radio:true,
				
				// dialog弹窗
				dialogForm:false,
				title:"",
				dialogType:"",
				fieldsData:[],
				action:{ type: '',relevant:'' },
				formData:{},
				detailData:{},
			}
		},
		computed: {
			tabName() {
				if (this.tabCurrentName == 'basicinfo') {
					return 'c-r-m-base-info'
				}else if (this.tabCurrentName == 'record') {
					return 'c-r-m-lawcase-log'
				}else if (this.tabCurrentName == 'finance') {
					return 'c-r-m-lawcase-finance'
				}else if (this.tabCurrentName == 'court') {
					return 'c-r-m-lawcase-court'
				}else if (this.tabCurrentName == 'judgment') {
					return 'c-r-m-lawcase-judgment'
				}else if (this.tabCurrentName == 'preservation') {
					return 'c-r-m-lawcase-preservation'
				}else if (this.tabCurrentName == 'complain') {
					return 'c-r-m-lawcase-complain'
				}else if (this.tabCurrentName == 'action') {
					return 'c-r-m-action-record'
				}
				return ''
			}
		},
		mounted() {
			this.getDetial()
		},
		methods: {
			// 获取详情
			getDetial(){
				crmLawcaseRead({
					id: this.$route.params.id
				})
				  .then(res => {
				    this.detailData = res.data
				  })
				  .catch(err => {
				    if (err && err.code == 102) {
				      this.hasRequestAuth = false
				    }
				    this.loading = false
				  })
			},
			
			//* * tab标签点击 */
			listHeadHandle(tname) {
				// console.log(tabName);
				this.tabCurrentName = tname
				this.id = this.$route.params.id
			},
			
			onLeftHandle(item){
				switch (item.type){
					case "close":
						this.title = "结案"
						this.dialogForm = true
						this.action={ type: 'update',relevant:'close' ,actiontype:18}
						this.formData = JSON.parse(JSON.stringify(this.detailData))
						break;
						
					case "allclose":
						this.title = "归档"
						this.dialogForm = true
						this.action={ type: 'update',relevant:'allclose' ,actiontype:19 }
						this.formData = JSON.parse(JSON.stringify(this.detailData))
						break;
					
					case "focus":
						this.delInfo({"type":item.type})
						break;
						
					case "save_panjue":
						this.title = "添加判决"
						this.dialogForm = true
						this.action = { type: 'save',relevant:'judgment',actiontype:30  }
						break;
						
					case "save_complain":
						this.title = "添加客户反馈"
						this.dialogForm = true
						this.action = { type: 'save',relevant:'lawcasecomplain',actiontype:32  }
						break;
				}
			},
			
			// 弹窗操作
			closeDialog(){
				this.title = ""
				this.dialogForm = false
				this.formData = {}
			},
			
			// 保存操作
			saveDialog(item){
				let data = item.data
				data["lawcase_id"] = this.$route.params.id
				let request
				if(item.type == "update_close"){
					request = crmLawcaseClose
				}else if(item.type == "update_allclose"){
					request = crmLawcaseAllclose
				}else if(item.type == "save_judgment"){
					request = crmLawcaseJudgmentSave
				}else if(item.type == "save_lawcasecomplain"){
					request = crmLawcaseLawcasecomplainSave
				}
				request(data)
					.then(res => {
						this.$message.success(res.data)
						this.closeDialog()
						if(this.tabCurrentName== 'basicinfo'){
							this.$refs.baseinfo.getBaseInfo()
						}
						this.getDetial()
					})
			},
			
			
			delInfo(item){
				let request
				let id
				if(item.type == "focus"){
					request = crmLawcaseFocus
					id = this.$route.params.id
				}
				this.$confirm('确定关注该案件?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
				.then(() => {
					request({
						id:id
					})
					.then(res => {
						this.$message.success(res.data)
						this.$refs.baseinfo.getBaseInfo()
					})
					.catch(() => {})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消操作'
					})
				})
			},
			
			
			infoHandle(item){
				this.getDetial()
			}
		}
	};
</script>
<style scoped>
	.detailtop{
		display: flex;
		background-color: #f2f2f2; 
		align-items: center; 
		flex-direction: column; 
		min-height: 100vh;
	}
	.content_item {
		height: 100%;
		display: flex;
		align-items: center;
		font-size: 12px;
	}

	.content_box {
		height: 40px;
		/* background-color: #eeeff4; */
		display: flex;
		align-items: center;
		padding: 0 10px;
	}

	.titel_item {
		height: 100%;
		display: flex;
		align-items: center;
		font-size: 14px;
		font-weight: 550;
	}

	.titel_box {
		height: 50px;
		background-color: #eeeff4;
		display: flex;
		align-items: center;
		padding: 0 10px;
	}

	.lianxiren_add {
		margin: 0 5px;
		color: #fff;
		background-color: #b5060d;
		font-size: 12px;
		padding: 5px 10px;
	}

	.lianxirem_title {
		height: 100%;
		display: flex;
		align-items: center;
		font-size: 18px;
		font-weight: 600;
	}

	.lianxiren {
		height: 50px;
		align-items: center;
		/* border-bottom: 1px solid #f2f2f2; */
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		margin-top: 20px;
		padding: 0 10px;
	}

	

	.left-item {
		border-radius: 3px;
		border: 1px solid #f2f2f2;
		margin: 3px 5px;
		font-size: 14px;
		padding: 10px 15px;
		display: flex;
		justify-content: space-between;
		color: #8d8d8d;
		cursor: pointer;
	}
	.left-item:hover{
		background-color: #b5060d;
		color: #fff;
	}

	.box {
		width: 1200px;
	}

	
	/* /deep/ .el-tabs__item.is-top:last-child{
		padding-right: 20px !important;
	}
	/depp/ .el-tabs--top .el-tabs__item.is-top:nth-child(2){
		padding-left: 20px !important;
	} */

	.nav_item {
		color: #545454;
		font-weight: 600;
	}

	.left-box {
		width: 200px;
		/* height: 740px; */
		background-color: #fff;
		padding: 5px;
		display: flex;
		flex-direction: column;
	}

	.right-box {
		width: 990px;
		margin-left: 10px;
		background-color: #fff;
	}
	
</style>